<template>
  <h1>今年的年龄：<input type="text" v-model.number="age" /></h1>
  <h1>十年后的年龄：<input type="text" v-model.number="newAge" /></h1>
</template>

<script>
import { computed, ref } from 'vue';
export default {
  setup() {
    let age = ref(20);
    // 计算属性
    // 谨记，age 使用 ref包装之后是一个对象，需要age.value访问里面的值
    const newAge = computed({
      get() {
        return age.value + 10;
      },
      set(val) {
        age.value = val - 10;
      },
    });
    return { age, newAge };
  },
};
</script>
